<template>
  <div class="panel">
    <transition name="el-zoom-in-center">
      <el-dialog title="配置详情" :visible.sync="dialogFormVisible" size="large">
        <div class="panel-body">
          <div class="container-fluid">
            <div class="row" style="padding : 10px 0px">
              <div class="col-md-6" v-for="item in fields.itemMap">
                <template v-if="item.isKey">
                  <el-tag type="danger">{{item.name}}</el-tag>
                  <el-input v-if="fuctype == 'change'"
                    type="textarea"
                    autosize disabled
                    :placeholder="item.tip"
                    v-model="item.value">
                  </el-input>
                  <el-input v-else
                            :readonly="isReadOnly"
                            type="textarea"
                            autosize
                            :placeholder="item.tip"
                            v-model="item.value">
                  </el-input>
<!--                  <el-input :placeholder="item.tip" v-model="item.value" disabled v-if="fuctype == 'change'"></el-input>
                  <el-input :placeholder="item.tip" v-model="item.value" :readonly="isReadOnly" v-else></el-input>-->
                </template>
                <template v-else="">
                  <el-tag type="primary">{{item.name}}</el-tag>
                  <el-input :readonly="isReadOnly"
                            type="textarea"
                            autosize
                            :placeholder="item.tip"
                            v-model="item.value">
                  </el-input>
                  <!--<el-input :placeholder="item.tip" v-model="item.value" :readonly="isReadOnly"></el-input>-->
                </template>
              </div>
            </div>
            <div class="row" style="padding : 10px 0px">
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" v-if="type === 'confirm'">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </transition>
  </div>
</template>

<style scoped>

</style>

<script>
  export default {
    name: 'dialog',
    data: function () {
      return {
        dialogFormVisible: false
      }
    },
    props: {
      // 树数据
      fields: {
        type: Object
      },
      fuctype: {
        type: String
      },
      type: {
        type: String,
        default: 'confirm'
      },
      isReadOnly: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      show(){
        this.dialogFormVisible = true;
      },
      save(){
        this.dialogFormVisible = false;
        this.$emit('save',this);
      }
    }
  }
</script>
